<template>
    <view class="container">
        <!-- 支付状态图片 -->
        <view class="pay-status">
            <image class="status-img" :src="statusImage" />
        </view>

        <!-- 支付状态文字 -->
        <view class="pay-text">
            <text class="status-message">{{ statusMessage }}</text>
        </view>

        <!-- 支付金额 -->
        <view class="pay-amount" v-if="isSuccess">
            <text class="amount-text">￥{{ amount }}</text>
        </view>

        <!-- 操作按钮 -->
        <view class="button-group">
            <button class="action-btn" @click="goHome">返回首页</button>
            <!-- <button class="action-btn" v-if="isFailed" @click="retryPayment">重新支付</button> -->
            <!-- <button class="action-btn" v-if="isSuccess" @click="updatePersonalInfo">完善个人信息</button> -->
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                // 模拟支付状态和数据
                status: '', // 'success' | 'failed' | 'waiting'
                amount: 0, // 支付金额
                orderId: null, // 存储传递的订单ID
            };
        },
        computed: {
            // 根据支付状态动态生成显示的文字和图标
            statusMessage() {
                switch (this.status) {
                    case 'success':
                        return '支付成功';
                    case 'failed':
                        return '支付失败';
                    case 'waiting':
                        return '检测支付结果...';
                    default:
                        return '';
                }
            },
            statusImage() {
                switch (this.status) {
                    case 'success':
                        return 'https://cdn1.sanyedu.com/static/img/order_pay_success.gif'; // 支付成功图标路径
                    case 'failed':
                        return 'https://cdn1.sanyedu.com/static/img/order_paty_fail.gif'; // 支付失败图标路径
                    case 'waiting':
                        return 'https://cdn1.sanyedu.com/static/img/waiting.gif'; // 等待支付图标路径
                    default:
                        return '';
                }
            },
            // 判断支付状态
            isSuccess() {
                return this.status === 'success';
            },
            isFailed() {
                return this.status === 'failed';
            },
            isWaiting() {
                return this.status === 'waiting';
            },
        },
        methods: {
            goHome() {
                // 返回首页的操作
                uni.navigateTo({
                    url: '/subPackage1/marriageHelp/marriageHelp',
                });
            },
            retryPayment() {
                // 重新支付的操作
                uni.navigateTo({
                    url: '/pages/pay/index', // 假设重新支付页面是 /pages/pay/index
                });
            },
            updatePersonalInfo() {
                this.f.nav('/subPackage1/basics/basics')
            },
            fetchOrderData() {
                var t = this
                t.$api.req(`/pay/order/get?id=${this.orderId}`,{
                },'GET',"JSON",false).then(res => {
                    const orderData = res.data;
                    // 根据返回的数据设置状态信息
                    this.status = orderData.status === 10 ? 'success' : 'failed'; // 假设状态10表示成功，其他为失败
                    this.amount = orderData.price;

                });
            },
        },
        onLoad(options) {
            var id = options.id || 505
            // 获取URL中的id参数
            if (id) {
                this.orderId = id;
                // 请求订单数据
                this.fetchOrderData();
            }
        },
    };
</script>

<style lang="scss" scoped>
    /* 页面整体容器 */
    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 50rpx;
        background-color: #fff;
    }

    /* 支付状态图标 */
    .pay-status {
        margin-bottom: 30rpx;
    }

    .status-img {
        width: 130rpx;
        height: 130rpx;
    }

    /* 支付状态文字 */
    .pay-text {
        margin-bottom: 30rpx;
    }

    .status-message {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
    }

    /* 支付金额 */
    .pay-amount {
        margin-bottom: 50rpx;
    }

    .amount-text {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
    }

    /* 按钮区域 */
    .button-group {
        display: flex;
        justify-content: center;
        gap: 32rpx;
    }

    /* 按钮样式 */
    .action-btn {
        /* width: 180rpx; */
        height: 60rpx;
        font-size: 28rpx;
        background-color: $uni-btn-color;
        color: white;
        border-radius: 30rpx;
        border: none;
        display: flex;
        /* 使用flex布局 */
        align-items: center;
        /* 垂直居中 */
        justify-content: center;
        /* 水平居中 */
    }

    .action-btn:active {
        background-color: #005bb5;
    }
</style>